<template>
  <div class="excel-to-json app-container">
    <ContentLayout :title="'Excel转Json'">
      <div>
        <CustomUpload v-model:fileList="fileList" :limit="1"></CustomUpload>
        <el-button type="primary" @click="handleWordToHtml"
          >word to html</el-button
        >
      </div>
      <div v-html="convertedHtml"></div>
    </ContentLayout>
  </div>
</template>

<script setup lang="ts">
import mammoth from "mammoth";
import type { UploadUserFile } from "element-plus";
import { ElMessageBox } from "element-plus";
import { ref } from "vue";

const fileList = ref<UploadUserFile[]>([]);
const convertedHtml = ref<string>("");
const handleWordToHtml = () => {
  ElMessageBox.confirm("是否将word转换为html?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    // 获取文件
    const file = fileList.value[0].raw;
    // let arrayBuffer = new Uint8Array(file);
    // 创建一个FileReader对象
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const arrayBuffer = e.target.result;
        mammoth
          .extractRawText({ arrayBuffer })
          .then((result) => {
            convertedHtml.value = result.value; // 获取转换后的HTML内容
            console.log(convertedHtml.value);
          })
          .catch((err) => {
            console.error("Error converting file:", err);
          });
      };
      reader.readAsArrayBuffer(file);
    }
  });
};
</script>

<style lang="scss" scoped></style>
